<template>
  <div class="app-container">
    <!-- 头部搜索框 -->
    <div class="filter-container">
      <section class="sectin01" style="width: '300px'">
        <!-- <el-tag type="primary" style="margin-right: 10px; font-size: 16px"
          >时间</el-tag
        > -->
        <el-date-picker
          v-model="value7"
          type="daterange"
          align="right"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd"
          format="yyyy-MM-dd"
          @change="time02()"
        ></el-date-picker>
      </section>
      <section class="sectin01">
        <el-button
          v-waves
          style="margin-left: 10px"
          class="filter-item"
          type="primary"
          icon="el-icon-search"
          ref="button01"
          name="9999999999999999"
          data-num="100"
          @click="handleFilter($event)"
          >查询</el-button
        >
        <el-button
          v-waves
          style="margin-left: 10px"
          class="filter-item"
          type="primary"
          icon="el-icon-search"
          @click="exportData"
          >导出</el-button
        >
      </section>
    </div>
    <!-- 内容 -->
    <div class="content">
      <el-table
        id="table2excel"
        :key="tableKey"
        v-loading="listLoading"
        element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(0, 0, 0, 0.6)"
        :data="ipOrderDetail || [{}]"
        height="700"
        border
        show-summary
        highlight-current-row
        :row-class-name="tableRowClassName"
        :default-sort="{ prop: 'add_time', order: 'descending' }"
      >
        <el-table-column
          type="index"
          label="序号"
          align="center"
          min-width="10"
        ></el-table-column>
        <el-table-column
          label="四方"
          min-width="50"
          class-name="end_times"
          align="center"
        >
          <template slot-scope="{ row }">
            <span>{{ row.pl_name }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="方式"
          min-width="50"
          class-name="end_times"
          align="center"
        >
          <template slot-scope="{ row }">
            <span>{{ row.pay_way }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="类型"
          min-width="50"
          class-name="end_times"
          align="center"
        >
          <template slot-scope="{ row }">
            <span>{{ row.ip_type }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="收款时间"
          min-width="50"
          class-name="end_times"
          align="center"
          sortable
          prop="add_time"
        >
          <template slot-scope="{ row }">
            <span>{{ row.add_time }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="购买数量"
          min-width="50"
          prop="amount"
          sortable
          class-name="end_times"
          align="center"
        >
          <template slot-scope="{ row }">
            <span>{{ row.amount }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="单价"
          min-width="50"
          sortable
          class-name="end_times"
          align="center"
        >
          <template slot-scope="{ row }">
            <span>{{ row.price }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="现金走账"
          min-width="50"
          sortable
          prop="total_receive_money"
          class-name="end_times"
          align="center"
        >
          <template slot-scope="{ row }">
            <span>{{ row.total_receive_money }}</span>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>


<script>
//引入vuex
import { mapState } from "vuex"
import {
  //收入统计
  ipOrderDetail_card,
  ipOrderPayDetail_card,
} from "@/api/table"
import waves from "@/directive/waves"
import Pagination from "@/components/Pagination"
import $ from "jquery"
import {export2Excel} from "@/assets/script/exoprtExcel"


export default {
  name: "ComplexTable",
  components: { Pagination },
  directives: { waves },
  filters: {
    filterLongTime(status = "") {
      var str = status
      str = str.replace(/\d{2}:\d{2}:\d{2}/g, "")
      return str
    },
    statusFilter(status) {
      const statusMap = {
        published: "success",
        draft: "info",
        deleted: "danger",
      }
      return statusMap[status]
    },
    masDateFormat: function (msg = "", pattern = "") {
      var mt = new Date(msg)
      var y = mt.getFullYear()
      var m = (mt.getMonth() + 1).toString().padStart(2, "0")
      var d = mt.getDate()
      if (pattern == "yyyy-mm-dd") {
        return y + "-" + m + "-" + d
      }
      return y + "-" + m + "-" + d
    },
    typeFilter(type) {
      return calendarTypeKeyValue[type]
    },
  },
  computed: {
    ...mapState(["cardConfig"]),
  },
  data() {
    //IP校验规则
    var checkIP = (rule, value, callback) => {
      var IP =
        "^((25[0-5]|2[0-4]\\d|[1]{1}\\d{1}\\d{1}|[1-9]{1}\\d{1}|\\d{1})($|(?!\\.$)\\.)){4}$"
      var patt1 = new RegExp(IP)
      if (!value) {
        return callback(new Error("IP地址不能为空"))
      }
      setTimeout(() => {
        if (!patt1.test(value)) {
          callback(new Error("请输入正确的IP地址"))
        } else {
          callback()
        }
      }, 1000)
    }
    return {
      time_quick: false,
      value7: [""],
      tableKey: 0,
      total: 0,
      listLoading: false,
      listQuery: {
        page: 1,
        limit: 20,
        time: undefined,
        ip: undefined,
        status: undefined,
        sort: "+id",
      },
      ipOrderDetail: [], //ip订单收入列表
    }
  },
  created() {
    //新
    this.ipOrderDetail_card() //ip订单收入表
  },
  methods: {
    exportData() {
      var columns1=[
        {title:"四方",key:'pl_name'},
        {title:"方式",key:'pay_way'},
        {title:"类型",key:'ip_type'},
        {title:"收款时间",key:'add_time'},
        {title:"购买数量",key:'amount'},
        {title:"单价",key:'price'},
        {title:"现金走账",key:'total_receive_money'},
        ]
      export2Excel(columns1,this.ipOrderDetail,'收入统计')
    },
    //指定多少天后,获取时间
    get_time() {
      let mm =
        new Date().getMonth() + 1 < 10
          ? "0" + (new Date().getMonth() + 1)
          : new Date().getMonth() + 1
      let yy =
        new Date().getFullYear() < 10
          ? "0" + new Date().getFullYear()
          : new Date().getFullYear()
      let dd =
        new Date().getDate() < 10
          ? "0" + new Date().getDate()
          : new Date().getDate()
      let hh = new Date().getHours()
      let mf =
        new Date().getMinutes() < 10
          ? "0" + new Date().getMinutes()
          : new Date().getMinutes()
      let ss =
        new Date().getSeconds() < 10
          ? "0" + new Date().getSeconds()
          : new Date().getSeconds()
      var value =
        yy + "-" + mm + "-" + dd + " " + "00" + ":" + "00" + ":" + "00 "
      var value01 =
        yy + "-" + mm + "-" + dd + " " + "23" + ":" + "59" + ":" + "59 "
      return [value, value01]
    },

    GetDateStr(AddDayCount) {
      var dd = new Date()
      dd.setDate(dd.getDate() + AddDayCount) //获取AddDayCount天后的日期
      var y = dd.getFullYear()
      var m =
        dd.getMonth() + 1 < 10 ? "0" + (dd.getMonth() + 1) : dd.getMonth() + 1 //获取当前月份的日期，不足10补0
      var d = dd.getDate() < 10 ? "0" + dd.getDate() : dd.getDate() //获取当前几号，不足10补0
      // console.log(y + "-" + m + "-" + d)
      return y + "-" + m + "-" + d + " " + "00" + ":" + "00" + ":" + "00 "
    },
    // 请求接口方法
    ipOrderDetail_card() {
      //ip订单收入表
      this.value7 = [this.GetDateStr(-30), this.get_time()[1]]
      this.listLoading = true
      ipOrderDetail_card({
        start_time: this.value7[0],
        end_time: this.value7[1],
      }).then((res) => {
        this.ipOrderDetail = res.data
        this.listLoading = false
      })
    },
    //旧的方法
    time02() {
      // console.log(this.value7)
      if (this.value7) {
        this.$store.commit("serchTime_card", this.value7)
      } else {
        this.$store.commit("serchTime_card", ["", ""])
      }
      this.time_quick = true
    },
    handleFilter(e) {
      console.log( this.$refs["button01"].$attrs.name);
      // console.log(arguments);
      // console.log(e.target);
      if (this.time_quick) {
        this.value7[0] = this.value7[0] + " " + "00" + ":" + "00" + ":" + "00 "
        this.value7[1] = this.value7[1] + " " + "23" + ":" + "59" + ":" + "59 "
      }
      this.listLoading = true
      ipOrderDetail_card({
        start_time: this.value7[0],
        end_time: this.value7[1],
      }).then((res) => {
        if (res.status == 0) {
          this.$message({
            type: "success",
            message: res.msg,
          })
          this.ipOrderDetail = res.data
          this.listLoading = false
          // this.todayApplyDetail_card_sync(); //获取当日详情
        } else {
          this.$message({
            type: "error",
            message: res.msg,
          })
        }
      })
    },

    sortChange(data) {
      const { prop, order } = data
      if (prop === "id") {
        this.sortByID(order)
      }
    },
    sortByID(order) {
      if (order === "ascending") {
        this.listQuery.sort = "+id"
      } else {
        this.listQuery.sort = "-id"
      }
      // this.handleFilter();
    },

    applyReceive(id, name) {
      this.$confirm("确认续费服务器吗?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          // console.log(id);
          //   renewReceive_card({
          //     id: id,
          //     pid:
          //       localStorage.getItem("id") ||
          //       this.$store.state.cardConfig.sort_id,
          //   }).then((res) => {
          //     // this.getData_card();
          //     if (res.status == 0) {
          //       this.$message({
          //         type: "success",
          //         message: res.msg,
          //       });
          //     } else {
          //       this.$message({
          //         type: "error",
          //         message: res.msg,
          //       });
          //     }
          //   });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "取消操作",
          })
        })
    },
    renewReceive(id, name) {
      this.$confirm("确认该操作吗?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          // console.log(id);
          //   encureRenewIp_card({
          //     id: id,
          //     pid:
          //       localStorage.getItem("id") ||
          //       this.$store.state.cardConfig.sort_id,
          //   }).then((res) => {
          //     // this.getData_card();
          //     if (res.status == 0) {
          //       this.$message({
          //         type: "success",
          //         message: res.msg,
          //       });
          //     } else {
          //       this.$message({
          //         type: "error",
          //         message: res.msg,
          //       });
          //     }
          //   });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "取消操作",
          })
        })
    },
    //分页
    handleSizeChange(e) {
      this.$store.commit("changelimit_ip", e)
      // this.getList();
    },
    handleCurrentChange(e) {
      this.$store.commit("changepage_ip", e)
      // this.getList();
    },
    //行样式
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex % 2 == 1) {
        return "warning-row"
      } else {
        return "success-row"
      }
    },
  },
}
</script>
<style lang='less' scoped>
/deep/.el-table td {
  padding: 6px 0px;
}
.filter-container {
  margin-top: 5px;
  display: flex;
  align-items: center;
  margin-bottom: 5px;
}
.addserve {
  /deep/.el-input {
    width: 80%;
    text-align: center;
    font-weight: bold;
    color: red;
  }
}

.success {
  color: #67c23a;
}
.warning {
  color: #e6a23c;
}
.outtime {
  color: #f56c6c;
}

/deep/.el-table .red_ip {
  color: #f56c6c !important;
}
.tables {
  background-color: pink;
  height: 80%;
}

.app-container {
  
  padding-left: 10px;
  padding-top: 10px;
  // .content {
  //   .right {
  //     box-sizing: border-box;
  //     //   width: 45%;
  //     .center {
  //       display: flex;
  //       justify-content: space-between;
  //       .left,
  //       .right {
  //         box-sizing: border-box;
  //         width: 49%;
  //         //   height: 600px;
  //         padding: 5px;
  //         /deep/.el-input__inner {
  //           line-height: 27px;
  //           height: 27px;
  //         }
  //       }
  //     }
  //   }
  // }
}

/deep/.el-dialog__body p {
  text-align: center;
}
</style>